<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    年:<input type="text" class="year">
    月:<input type="text" class="month">
    日:<input type="text" class="day">
    <button class="btn">判断</button>
    <span class="result"></span>
</body>
<script>
    // 注意: 表单取值用 value => 获取和设置表单控件的value值


    //
    // 一. 输入判断   => 将判断的结果输出到span
    // 1. 先输入年月日
    // 2. 点击取值 判断范围
    //    a. 年份 1000-9999的整数
    //    b. 月份 1-12的整数
    //    c. 日期
    //       大月: 1 3 5 7 8 10 12 => 31
    //       小月: 4 6 9 11 => 30
    //       2月: 平年=>28 闰年=>29


    // 二. 在第一题的基础上(格式全都正确)  => 判断输入的日期是该年的第多少天? => span

    // 第n个月如何算 => 前n-1个月之和 + 当前月几号
    // 2022-7-28 => ( 31 + 28 + 31 + 30 + 31 + 30 ) + 28


    // var yearInp = document.getElementsByClassName("year")[0];
    // var btn = document.getElementsByClassName("btn")[0];

    // btn.onclick = function () {
    //     var year = yearInp.value;
    //     console.log(year);
    // }


</script>
<script>
    // 断点 => 让代码执行到指定位置停止 => 后续可以手动控制执行 => 常用于调试代码

    // 断点的使用步骤
    // 1. 哪里不会点哪里
    // 2. 触发断点所在位置 => 代码  (在控制台 => source中查看执行步骤)
    //    a. 如果代码在页面加载时执行 => 刷新页面
    //    b. 如果代码在事件中 => 触发事件
    //    c. 如果代码在函数中 => 调用函数
    
    // 3. 让代码逐行执行
    //    F9   下一步
    //    F10  下一步 (如果存在函数调用 => 跳过函数执行步骤,直接得到结果)
    //    F11  下一步 (如果存在函数调用 => 进入函数,按步骤执行函数中的代码)
    //    F8   恢复脚本执行 => 整个脚本继续向后执行

    // 4. 移除断点 debugger

</script>
<script>
    // debugger;
    var yearInp = document.getElementsByClassName("year")[0];
    var monthInp = document.getElementsByClassName("month")[0];
    var dayInp = document.getElementsByClassName("day")[0];
    var btn = document.getElementsByClassName("btn")[0];
    var resultSpan = document.getElementsByClassName("result")[0];


    // 二. 在第一题的基础上(格式全都正确)  => 判断输入的日期是该年的第多少天? => span
    // 第n个月如何算 => 前n-1个月之和 + 当前月几号
    // 2022-7-28 => ( 31 + 28 + 31 + 30 + 31 + 30 ) + 28
    btn.onclick = function () {
        // debugger;
        var year = yearInp.value;
        var month = monthInp.value*1;
        var day = dayInp.value*1;


        var febDays = year % 4 == 0 && year % 100 != 0 || year % 400 == 0 ? 29 : 28;

        var sum = 0;
        switch(month){
            case 1: 
                sum = day;
                break;
            case 2: 
                sum = 31 + day;
                break;
            case 3: 
                sum = 31 + febDays + day;
                break;
            case 4: 
                sum = 31 + febDays + 31 +day;
                break;
            case 5: 
                sum = 31 + febDays + 31 + 30 + day;
                break;
            case 6: 
                sum = 31 + febDays + 31 + 30 + 31 + day;
                break;
            case 7: 
                sum = 31 + febDays + 31 + 30 + 31 + 30 + day;
                break;
            case 8: 
                sum = 31 + febDays + 31 + 30 + 31 + 30 + 31 + day;
                break;
            case 9: 
                sum = 31 + febDays + 31 + 30 + 31 + 30 + 31 + 31 + day;
                break;
            case 10: 
                sum = 31 + febDays + 31 + 30 + 31 + 30 + 31 + 31 + 30 + day;
                break;
            case 11: 
                sum = 31 + febDays + 31 + 30 + 31 + 30 + 31 + 31 + 30 + 31 + day;
                break;
            case 12: 
                sum = 31 + febDays + 31 + 30 + 31 + 30 + 31 + 31 + 30 + 31 + 30 + day;
                break;
        }

        resultSpan.innerHTML = sum;
       

    }



</script>

</html>